import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
} from 'react-native';
 
//图片选择器
import ImagePicker from 'react-native-image-crop-picker';
import {upLoading} from '../../../util/fetch';
 
//默认应用的容器组件
export default class TestImg extends Component {
   //构造函数
   constructor(props) {
      super(props);
      this.state = {
          avatarSource: null
      };
   }
 
   //渲染
   render() {
      return (
        <View style={styles.container}>
         <Text style={styles.item} onPress={this.xiangc.bind(this)}>选择相册照片</Text>
         <Text style={styles.item} onPress={this.pais.bind(this)}>选择拍摄照片</Text>
         <Text style={styles.item} onPress={this.clean.bind(this)}>清理临时文件</Text>
         <Image source={this.state.avatarSource} style={styles.image} />
        </View>
      );
   }
   //相册选择
   xiangc(){
    ImagePicker.openPicker({
        width: 300, 
        height: 400, 
        cropping: true,
        cropperCircleOverlay :true
     }).then(image => { 
        this.setState({
            avatarSource: {uri:image.path}
        });        
        this._upload(image);
     });
   }
   //拍摄选择
   pais(){
    ImagePicker.openCamera({  
        width: 300,  
        height: 400,  
        cropping: true,
        cropperCircleOverlay :true  
      }).then(image => {  
        this.setState({
            avatarSource: {uri:image.path}
        });    
        this._upload(image);
      });  
   }

   _upload(image){
      upLoading("upload/img.go",image);
   }

   clean(){
       ImagePicker.clean().then(() => { 
        }).catch(e => { 
            alert(e);
        });
   }

 }
 
//样式定义
const styles = StyleSheet.create({
  container:{
    flex: 1,
    marginTop:25
  },
  item:{
    margin:15,
    height:30,
    borderWidth:1,
    padding:6,
    borderColor:'#ddd',
    textAlign:'center'
  },
  image:{
   height:60,
   width:60,
   borderRadius:30,
   alignSelf:'center',
 },
});